<template>

  <a-layout style="height: 1830px;">
    <a-layout-content style="background-color: #F2F2E6">
      <br><br><br>

      <guide-stepper v-if="isShow"/>

      <v-row no-gutters>
        <v-col cols="12" lg="1">
          <guide-record/>
        </v-col>
        <v-col cols="12" lg="10" style="text-align: center">
            <img src="../../public/images/think-b.png"
                 style="width: 250px; height: 200px; margin-top: 100px"
                 alt=""/>
        </v-col>
        <v-col cols="12" lg="1"></v-col>
      </v-row>

      <br><br><br>
      <p align="center"
         style="font-family: '华文楷体',sans-serif; font-size: 35px; color: #89B8CA; font-weight: bolder">
        请您仔细思考后回答以下问题，这对您的方案形成有着重要意义。
      </p>
      <br><br>

      <div style="font-family: '华文楷体',sans-serif; font-weight: bolder; width: 1200px; margin: auto">
        <v-form
          ref="form"
          v-model="valid"
        >

          <v-select
            v-model="form.q1"
            :items="items"
            :rules="[v => !!v || '请回答该问题']"
            label="您目前正在进行的发明创造属于什么领域？"
            required
          ></v-select>
          <br>

          <v-select
            v-model="form.q2"
            :items="money"
            :rules="[v => !!v || '请回答该问题']"
            label="您进行这项发明的预算是多少？（单位：人民币）"
            required
          ></v-select>
          <br>

          <v-select
            v-model="form.q3"
            :items="ans"
            :rules="[v => !!v || '请回答该问题']"
            label="这项发明创造将来是否有申请发明专利的希望？"
            required
          ></v-select>
          <br>

          <v-select
            v-model="form.q4"
            :items="days"
            :rules="[v => !!v || '请回答该问题']"
            label="您期望在多长时间内完成这项发明创造？"
            required
          ></v-select>
          <br>

          <v-text-field
            v-model="form.q5"
            :counter="20"
            :rules="textRules"
            label="您目前遇到的问题严重程度如何？"
            required
          ></v-text-field>
          <br>

          <v-text-field
            v-model="form.q6"
            :counter="20"
            :rules="textRules"
            label="如果不改善这个问题，会造成什么后果？这些后果是否能够通过其他途径弥补？"
            required
          ></v-text-field>
          <br>

          <v-select
            v-model="form.q7"
            :items="ans"
            :rules="[v => !!v || '请回答该问题']"
            label="这个问题改善后是否会对自己或他人造成不良影响？"
            required
          ></v-select>
          <br>

          <v-text-field
            v-model="form.q8"
            :counter="20"
            :rules="textRules"
            label="基于什么样的原因，您希望改善这个问题？（如领导要求等）"
            required
          ></v-text-field>
          <br>

          <v-select
            v-model="form.q9"
            :items="ans_b"
            :rules="[v => !!v || '请回答该问题']"
            label="您是否对问题的关键所在有过详细思考和分析？"
            required
          ></v-select>
          <br>

          <v-select
            v-model="form.q10"
            :items="ans_b"
            :rules="[v => !!v || '请回答该问题']"
            label="在使用我们的工具之前，您是否有较为成熟的解决方案？"
            required
          ></v-select>

        </v-form>
      </div>

      <div style="text-align: center; margin-top: 50px;">
        <v-btn
          elevation="12"
          rounded
          large
          color="main_1"
          @click="save"
          style="font-family: '华文楷体',sans-serif;
          font-weight: bold;
          font-size: 15px;
          color:#FFFAF4;
          margin-right: 60px"
        >
          <span>保存</span>
          &nbsp;
          <a-icon type="save" />

        </v-btn>
        <v-btn
          elevation="12"
          rounded
          large
          color="main_1"
          @click="submit"
          style="font-family: '华文楷体',sans-serif;
          font-weight: bold;
          font-size: 15px;
          color:#FFFAF4;
          margin-left: 60px"
        >
          <span>下一步</span>
          &nbsp;
          <a-icon type="double-right" />

        </v-btn>
      </div>

    </a-layout-content>
  </a-layout>
</template>


<script>
  import request from "../utils/request";
  import GuideStepper from '@/components/Stepper'
  import GuideRecord from "../components/GuideRecord";
  export default {
    name: 'guidance_questions',
    components: {
      GuideStepper, GuideRecord
    },
    created() {
      this.$store.commit('SET_KEEP_ALIVE', ['guidance_questions', 'guidance_model', 'guidance_retrieval', 'solution_edit'])
      this.$store.state.currentStep = 0
      this.loadAnswer()
    },
    activated() {
      this.$store.commit('SET_KEEP_ALIVE', ['guidance_questions', 'guidance_model', 'guidance_retrieval', 'solution_edit'])
      this.$store.state.currentStep = 0
      this.loadAnswer()
    },
    beforeRouterEnter(to, from, next) {
      next((vm) => {
        vm.isShow = true;
      });
    },
    beforeRouterLeave(to, from, next) {
      this.isShow = false;
      next();
    },
    data: () => ({
      stepStyle: {
        marginBottom: '10px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset',
      },
      valid: false,
      form: {},
      isShow: true,
      textRules: [
        v => !!v || '请回答该问题',
        v => (v && v.split(" ").join("").length !== 0) || '请回答该问题',
        v => (v && v.length <= 20) || '请简要回答问题，不超过20字',
      ],
      items: [
        '人类生活需要（农、轻、医)',
        '作业、运输',
        '化学、冶金',
        '纺织、造纸',
        '固定建筑物',
        '机械工程、照明、加热、武器、爆破',
        '物理',
        '电学'
      ],
      days: [
        '少于1个月',
        '1至3个月',
        '3个月至1年',
        '1至3年',
        '3年以上'
      ],
      money: [
        '预算紧张，少于2000元',
        '2000至5000元',
        '5000至10000元',
        '10000至100000元',
        '预算充足，100000元以上',
        '尚未考虑预算，只是试试'
      ],
      ans: [
        '是',
        '否',
        '我也说不清楚',
      ],
      ans_b: [
        '是',
        '否',
      ]
    }),

    methods: {
      parseJSONCapture(str) {
        try {return JSON.parse(str);}
        catch (e) {
          this.confirm()
        }
      },
      decodeCapture(str) {
        try {return decodeURIComponent(window.atob(str))}
        catch (e) {
          this.confirm()
        }
      },
      confirm(){
        if (sessionStorage.getItem('guideId'))
          sessionStorage.removeItem('guideId')
        if (sessionStorage.getItem('graph'))
          sessionStorage.removeItem('graph')
        if (sessionStorage.getItem('selectableNodes'))
          sessionStorage.removeItem('selectableNodes')
        this.$router.push('/personal/guide')
      },
      async loadAnswer(){
        request.get('/guide/isMine', {params: {id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))}}).then(res1 => {
          if (res1.code === '200'){
            let id = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))
            request.get("/guide/" + id).then(res => {
              if (res.code === '200') {
                this.form = res.data
                this.$refs.form.resetValidation()
              }
            })
          }
          else this.confirm()
        })
      },
      async save(){
        request.get('/guide/isMine', {params: {id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))}}).then(res1 => {
          if (res1.code === '200') {
            this.$refs.form.validate()
            if (this.valid === true) {
              this.form.userId = -1
              this.form.id = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))
              request.post("/guide", this.form).then(res => {
                if (res.code === '200') {
                  this.sendSuccessMessage(res.msg)
                }
              })
            } else {
              this.sendWarnMessage('请完善问卷信息')
            }
          } else this.confirm()
        })
      },
      submit () {
        this.$refs.form.validate()
        if (this.$store.state.maxStep === 0)
          this.form.process = 1
        if (this.valid === true){
          this.save()
          this.$router.push('/intelligent_guidance/model')
        } else {
          this.sendWarnMessage('请完善问卷信息')
        }
      },
    },
  }
</script>

<style scoped>
  /*v-select内联样式*/
  .v-menu__content {
    border-radius: 30px !important;
    max-height: 600px !important;
    font-weight: bold;
  }
  .v-list {
    background-color: #FFFAF4 !important;
  }
  .v-list-item {
    font-family: '华文楷体',sans-serif;
  }

</style>

